// Aufgabe_12_3_Farbmischer_HSB

var hue;
var saturation;
var brightness;

function setup(){
  createCanvas(700, 580);
  colorMode(HSB, 360, 100, 100);
  background(360, 100, 0);

  // Die Schieberegler (Slider) werden erzeugt und positioniert
  hue = createSlider(0, 360, 0);
  hue.position(50, 600);
  saturation = createSlider(0, 100, 0);
  saturation.position(250, 600);
  brightness = createSlider(0, 100, 0);
  brightness.position(450, 600);
}

function draw(){
  var h = hue.value();
  var s = saturation.value();
  var b = brightness.value();

  stroke(360, 0, 100);
  fill(h,100,100);
  rect(50, 40, 140, 490);
  fill(h,s,100);
  rect(250, 40, 140, 490);
  fill(h,s,b);
  rect(430, 40, 210, 490);

  stroke(360, 100, 0);
  fill(360, 0, 100);
  textSize(30);
  textAlign(CENTER)
  text("H = " +h, 120, 510);
  text("H = " +h, 320, 470);
  text("S = " +s, 320, 510);
  text("H = " +h, 530, 430);
  text("S = " +s, 530, 470);
  text("B = " +b, 530, 510);

  textSize(20);
  textAlign(CENTER)
  text("H", 120, 560);
  text("H+S", 320, 560);
  text("H+S+B", 530, 560);
}
